import 'package:flutter/material.dart';
import 'package:myapp/components/Logger/loggers.dart';
import 'package:myapp/page/Chat/emojis.dart';
import 'package:myapp/page/Chat/messages.dart';
import 'package:myapp/page/Chat/more_features.dart';
import 'package:myapp/type/chat.dart';

class Chat extends StatefulWidget {
  const Chat({super.key});

  @override
  State<StatefulWidget> createState() {
    return _ChatState();
  }
}

class _ChatState extends State<Chat> {
  MessageContent messageContent = MessageContent(
      messageId: '1',
      fromId: '1',
      date: '2024',
      content: Content('1', {'content': "您好，我想咨询一下这个商品的详细信息" * 6}));
  String avatar =
      "https://storage.taoqilin.cn/blog/66189ab0-bb8f-11ee-a9f3-6507eddc2e21";
  String myId = '2';
  List<MessageContent> list = [
    MessageContent(
        messageId: '1',
        fromId: '1',
        date: '2024',
        content: Content('1', {'content': "您好，我想咨询一下这个商品的详细信息" * 6})),
    MessageContent(
        messageId: '1',
        fromId: '1',
        date: '2024',
        content: Content('1', {'content': "笔记本" * 6})),
    MessageContent(
        messageId: '1',
        fromId: '1',
        date: '2024',
        content: Content('1', {'content': "哪个型号" * 6})),
    MessageContent(
        messageId: '1',
        fromId: '1',
        date: '2024',
        content: Content('1', {'content': "您好，我想咨询一下这个商品的详细信息" * 6})),
    MessageContent(
        messageId: '1',
        fromId: '1',
        date: '2024',
        content: Content('1', {'content': "您好，我想咨询一下这个商品的详细信息" * 6})),
    MessageContent(
        messageId: '1',
        fromId: '1',
        date: '2024',
        content: Content('1', {'content': "您好，我想咨询一下这个商品的详细信息" * 6})),
  ];

  final FocusNode _focusNode = FocusNode();

  bool _ribbonShow = false;
  bool _emoji = false;
  bool _moreFeatures = false;
  void showEmoji() {
    _focusNode.unfocus();
    setState(() {
      _ribbonShow = true;
      _emoji = true;
      _moreFeatures = false;
    });
  }

  void showMoreFeatures() {
    _focusNode.unfocus();
    setState(() {
      _ribbonShow = true;
      _moreFeatures = true;
      _emoji = false;
    });
  }

  void noShowRibbon() {
    _focusNode.unfocus();
    setState(() {
      _ribbonShow = false;
      _emoji = false;
      _moreFeatures = false;
    });
  }

  @override
  void initState() {
    super.initState();

    // Optional: Add a listener to do something when focus changes
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        logger.t("获取焦点");
        setState(() {
          _ribbonShow = false;
          _emoji = false;
          _moreFeatures = false;
        });
      } else {
        logger.t("失去焦点");
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("data"),
        backgroundColor: Colors.amber,
      ),
      body: Column(
        children: [
          Expanded(
            child: GestureDetector(
              onTap: noShowRibbon,
              child: Container(
                color: const Color(0xFFF6F6F6),
                child: ListView(
                  padding: const EdgeInsets.all(16),
                  children: [
                    // 对话
                    for (var i = 0; i < list.length; i++) // 动态创建5个Text小部件
                      Message(
                          avatar: avatar, messageContent: list[i], myId: myId),
                  ],
                ),
              ),
            ),
          ),
          SafeArea(
              child: Column(
            children: [
              Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                          focusNode: _focusNode,
                          cursorColor: const Color(0x0f222222), // 将光标颜色设置为红色
                          // cursorWidth: 2.0, // 将光标宽度设置为4.0逻辑像素
                          // cursorHeight: 20.0, // 设置光标的高度
                          cursorRadius:
                              const Radius.circular(3.0), // 设置光标的圆角半径为3.0
                          showCursor: true,
                          style: const TextStyle(
                            height: 1.0, // 调整行高
                          ),
                          keyboardType: TextInputType.text,
                          decoration: InputDecoration(
                            filled: true,
                            fillColor: const Color(0xFFF6F6F6),
                            isDense: true, // 减小TextField的垂直空间
                            hintText: "发消息. . .",
                            contentPadding: const EdgeInsets.symmetric(
                                vertical: 10, horizontal: 10),
                            // 设置边框为圆角，但不显示边框线
                            border: OutlineInputBorder(
                              borderRadius:
                                  BorderRadius.circular(15.0), // 设置圆角的大小
                              borderSide: const BorderSide(
                                  color: Colors.transparent), // 将边框线设置为透明
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15.0),
                              borderSide:
                                  const BorderSide(color: Colors.transparent),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15.0),
                              borderSide:
                                  const BorderSide(color: Colors.transparent),
                            ),
                          )),
                    ),
                    IconButton(
                      icon: const Icon(Icons.sentiment_very_satisfied),
                      onPressed: showEmoji,
                    ),
                    IconButton(
                      icon: const Icon(Icons.add_circle_outline),
                      onPressed: showMoreFeatures,
                    )
                    // TextField(),
                  ],
                ),
              ),
              if (_ribbonShow)
                Container(
                  child: _emoji
                      ? const Emoji()
                      : _moreFeatures
                          ? const MoreFeatures()
                          : null,
                )
            ],
          ))
        ],
      ),
    );
  }

  @override
  void dispose() {
    // Important: Always dispose a FocusNode when it's no longer needed to prevent memory leaks
    _focusNode.dispose();
    super.dispose();
  }
}
